<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        issue：
        // 输入完成后让文本框为空----不生效了！！
     -->
    <!-- 
        ！！！！有结果的是表达式
        无结果的是语句


        注意methods与computed的使用
        出错记录：把addTaskFun写到methods中，结果网页效果不正常
     -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_todolist练习note_v-model版</title>
    <style>
        
        .doneTaskStyle{
            text-decoration: line-through;
            color: red;
        }
        #infoNav>button{
            margin-left: 5px;
            border: 1px solid black;
            padding: 5px;
        }
        .choiceButton{
            background-color: tomato;
            color: white;
            border: 0px ;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 按钮栏 -->
        <div id="infoNav">
            <button v-for="(item,index) in buttonList" :key="index" @click="currentButtonName=item" :class="{choiceButton:currentButtonName==item?true:false}">{{item}}</button>
            <span>完成率：{{doneTaskList.length}}/{{taskList.length}}</span>
        </div>

        <!-- 任务栏 -->
        <ul id="taskList">
            <li v-for="(item,index) in filterTaskList" :key="index" :class="{doneTaskStyle:item.done}" @click="item.done=!item.done">{{item.name}}</li>
        </ul>

        <!-- 输入栏-使用v-model.lazy同步数据 -->
        <div id="inputbox">
            <input type="text" v-model.lazy="addTaskName"/>
            <button @click="addTaskFun">Add</button>
            
        </div>
    </div>
    
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data(){
                return{
                    // 按钮栏用
                    buttonList:["All Tasks","Active","Done"],
                    currentButtonName:"All Tasks",

                    // 任务栏用-任务数组
                    taskList:[
                        // done中 true为已完成任务，false为待进行任务
                        {name:"HTML",done:true},
                        {name:"CSS",done:true},
                        {name:"JavaScript",done:false},
                    ],

                    // 输入栏用
                    addTaskName:"",
                }
            },
            methods:{
                
                 // 输入函数--结合v-model数据，添加任务事项
                 addTaskFun(){
                    //  check this.addTaskName value
                    console.log(this.addTaskName);
                    // 对齐原任务列表的数据格式
                    this.taskList.push(
                        {name:this.addTaskName,done:false}
                    );
                    // 输入完成后让文本框为空----不生效了！！
                    this.addTaskName="";
                    //  check this.addTaskName value
                    console.log(this.addTaskName);
                    
                }
            },
            computed:{
                // 筛选任务状态-返回相应状态任务数组
                filterTaskList(){
                    switch(this.currentButtonName){
                        case "Done": return this.taskList.filter(item=>item.done);
                        case "Active": return this.taskList.filter(item=>!item.done);
                        default: return this.taskList;
                    }
                },
                // 筛选已完成的任务并返回
                doneTaskList(){
                     return this.taskList.filter(item=>item.done);
                },

            },
            watch:{}
        })
    </script>
</body>
</html>